<template>
  <div class="app-container customer-div">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="共享池" name="first">
            <resourceList ref="resourceList"></resourceList>
        </el-tab-pane>
        <el-tab-pane label="转移记录" name="second">
            <moveList ref="moveList"></moveList>
        </el-tab-pane>
        <el-tab-pane label="申请记录" name="third">
           <applyList ref="applyList"></applyList>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
    import resourceList from './components/resourceList'
    import moveList from './components/moveList'
    import applyList from './components/applyList'
    import { mapGetters } from 'vuex'
    export default {
      name: "index",
      data(){
          return {
            activeName:'first'
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
      },
      components : {
        resourceList,
        moveList,
        applyList
      },

      beforeRouteEnter(to, form, next) {
        next(vm => {
          console.log("33333")
          vm.$refs.resourceList.init();
        });
      },

      // created() {
      //   this.$nextTick(() => {
      //     console.log("78978")
      //     // dom元素更新后执行，因此这里能正确打印更改之后的值
      //     setTimeout(()=>{
      //       this.$refs.resourceList.init();
      //     })
      //
      //   })
      //
      // },
      filters: {

      },
      methods:{
          handleClick(tab, event) {
            if(tab.name == 'first'){
              this.$nextTick(() => {
                // dom元素更新后执行，因此这里能正确打印更改之后的值
                this.$refs.resourceList.init();
              })

            }else if(tab.name == 'second'){
              this.$nextTick(() => {
                // dom元素更新后执行，因此这里能正确打印更改之后的值
                this.$refs.moveList.handleSearchList();
              })

            }else if(tab.name == 'third'){
              this.$nextTick(() => {
                // dom元素更新后执行，因此这里能正确打印更改之后的值
                this.$refs.applyList.handleSearchList();
              })

            }
          }
      },
    }
</script>


